<template>
  <el-dialog :title="form.cusId ? '修改' : '添加'" width="600" v-model="visible"
             :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="90px" v-loading="loading">
      <el-form-item label="姓名" prop="cusName">
        <el-input v-model="form.cusName" placeholder="请输入姓名"/>
      </el-form-item>
      <el-form-item label="手机号" prop="cusTel">
        <el-input v-model="form.cusTel" placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item label="客户来源" prop="cusSource">
       <el-select v-model="form.cusSource" placeholder="请选择客户来源">
         <el-option v-for="item in startTypeDict" :key="item.value" :label="item.label" :value="item.value"></el-option>
       </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <textarea v-model="form.remark" placeholder="请输入备注" class="custom-textarea"></textarea>
      </el-form-item>
    </el-form>
    <template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="onSubmit" :disabled="loading">确定</el-button>
			</span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="systemPostDialog">
import {useMessage} from '/@/hooks/message';
import { getDetails,addCostomer,updateCustomer,checkTelExists} from '/@/api/customer/customer';
import {useDict} from "/@/hooks/dict";
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);

// 提交表单数据
const form = reactive({
  cusId:'',//客户ID
  cusName: '',//客户姓名
  cusTel:'',//手机号
  cusSource:'',//客户来源
  orderCount:'',//订单数
  tripCount:'',//行程数
  remark: '',
});

const { cus_source } = useDict('cus_source')
const startTypeDict = cus_source;


// 保存原始手机号（用于修改时判断是否变更）
const originalCusTel = ref('');
 // 手机号唯一性校验函数
const validateCusTel = async (rule: any, value: string, callback: any) => {
  if (!value) {
    return callback(new Error('手机号不能为空'));
  }
  // 格式校验（11位数字，以1开头）
  const reg = /^1[3-9]\d{9}$/;
  if (!reg.test(value)) {
    return callback(new Error('请输入有效的11位手机号'));
  }
  // 修改操作：若手机号未变更，跳过唯一性校验
  if (form.cusId && originalCusTel.value === value) {
    return callback();
  }
  // 调用后端接口检查唯一性
  try {
    const res = await checkTelExists(value, form.cusId);
    if (res.data) { // res.data为true表示已存在
      callback(new Error('该手机号已被使用，请更换'));
    } else {
      callback(); // 校验通过
    }
  } catch (error) {
    callback(new Error('校验失败，请稍后重试'));
  }
};

// 定义校验规则
const dataRules = ref({
  cusName: [
    {required: true, message: '客户名称不能为空', trigger: 'blur'},
  ],
  cusTel: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    {validator: validateCusTel, trigger: 'blur' }//绑定自定义校验
  ],
  cusSource: [
    { required: true, message: '客户来源不能为空', trigger: 'blur' }
  ],

});

// 打开弹窗
const openDialog = (cusId: string | number) => {
  visible.value = true;
  form.cusId = '';
  originalCusTel.value = ''; // 重置原始手机号


  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 编辑场景下赋值有cusId,进行编辑
  if (cusId) {
    form.cusId = cusId;
    getOrderDataByGetOne(cusId).then(()=>{
      // 保存当前手机号为原始值
      originalCusTel.value = form.cusTel;
    })
  }
};

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {
  });
  if (!valid) return;

  try {
    loading.value = true;
    if(!form.cusId){
    //   添加
      await addCostomer(form);
      useMessage().success("添加成功")
    }else{
      //修改
      await updateCustomer(form);
      useMessage().success("修改成功")
    }
    //关闭弹窗
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error("操作失败！");
  } finally {
    loading.value = false;
  }
};
// 获得表单数据
const getOrderDataByGetOne = async (cusId: string) => {
  try {
    loading.value = true;
    // 调用getOne接口，传入订单ID作为查询条件（唯一标识订单）
    const res = await getDetails({cusId:cusId});
    if (res.code === 0 && res.data) {
      const customerData = res.data;
      // 映射所有订单字段到表单（与后端返回字段一致）
      form.cusId = customerData.cusId;
      form.cusName = customerData.cusName || '';
      form.cusTel = customerData.cusTel || '';
      form.cusSource = customerData.cusSource; // 确保这里正确赋值
      form.orderCount= customerData.orderCount || '';
      form.tripCount= customerData.tripCount || '';
      form.remark = customerData.remark || '';
    } else {
      useMessage().error(res.msg || '未查询到订单信息');
    }
  } catch (err: any) {
    useMessage().error(`获取失败：${err.message || '网络异常'}`);
  } finally {
    loading.value = false;
  }
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>
<style scoped>
::v-deep .custom-textarea {
  /* 控制滚动条出现：内容超出高度时显示滚动条 */
  overflow: auto;
  /* 设置固定高度，让内容超出后触发滚动 */
  height: 100px;
  /* 禁止水平 resize，只允许垂直调整 */
  resize: vertical;
  /* 与Element UI其他输入框保持一致的边框样式 */
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 5px 15px;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5;
}

/* 聚焦时的样式，与其他输入框保持一致 */
::v-deep .custom-textarea:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
</style>
